import React from 'react';
import { Statistic } from 'antd';
import ProCard from '@ant-design/pro-card';
import styles from '../index.less';
import moment from 'moment';
import { useModel } from '@@/plugin-model/useModel';

const TitleCard: React.FC = () => {
  // 全局变量
  const { initialState } = useModel('@@initialState');
  // 页面变量
  const {item,owner,sale,loading,responsive} = useModel('item');
  const currentAccount = initialState?.currentAccount;

  return (
    <ProCard.Group
      className={styles.itemCard}
      direction={responsive ? 'column' : 'row'}
      bordered
      loading={loading}
    >
      <ProCard>
        <Statistic title='作品名称' value={item?.name} />
      </ProCard>
      <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
      <ProCard>
        <Statistic
          title='当前所有者'
          // value={
          //   item?.ownerAddress === currentAccount?.address
          //     ? '自己'
          //     : item?.owner?.username
          // }
          valueRender={()=>{
            if (sale){
              return sale.seller
            }else {
              return owner
            }
          }}
        />
      </ProCard>
      <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
      <ProCard>
        <Statistic
          title='创建时间'
          value={moment
            .unix(item?.fileStorage?.block?.time!)
            .format('YYYY-MM-DD HH:mm:ss')}
        />
      </ProCard>
    </ProCard.Group>
  );
};

export default TitleCard;
